<template>
  <el-main>
    <el-card
      shadow="never"
      header="过滤器"
    >
      <scFilterBar
        filter-name="filterName"
        :options="options"
        @filter-change="change"
      >
        <template #default="{filterLength, openFilter}">
          <el-badge
            :value="filterLength"
            type="danger"
            :hidden="filterLength<=0"
          >
            <el-button
              icon="el-icon-filter"
              @click="openFilter"
            />
          </el-badge>
        </template>
      </scFilterBar>
    </el-card>
    <el-alert
      title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,在@/config/filterBar.js中可以更改运算符以及其他配置,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适"
      type="success"
      style="margin:20px 0;"
    />
    <el-card
      shadow="never"
      header="返回值"
    >
      <pre>{{ filterData }}</pre>
    </el-card>
  </el-main>
</template>

<script>
import scFilterBar from '@/components/scFilterBar';

export default {
  name: 'FilterBar',
  components: {
    scFilterBar
  },
  data() {
    return {
      filterData : {},
      defaultFilter : [],
      options: [
        {
          label: '订单号',
          value: 'id',
          type: 'text',
          selected: true,
          placeholder: '请输入订单号'
        },
        {
          label: '类型',
          value: 'type',
          type: 'select',
          operator: '=',
          selected: true,
          placeholder: '请选择类型',
          extend: {
            data:[
              {
                label: "选项1",
                value: "1"
              },
              {
                label: "选项2",
                value: "2"
              }
            ]
          }
        },
        {
          label: '类型(多选)',
          value: 'type2',
          type: 'select',
          operator: '=',
          placeholder: '请选择类型',
          extend: {
            multiple: true,
            data:[
              {
                label: "选项1",
                value: "1"
              },
              {
                label: "选项2",
                value: "2"
              }
            ]
          }
        },
        {
          label: '通知(异步)',
          value: 'noticeType',
          type: 'select',
          operator: '=',
          placeholder: '请选择通知类型',
          extend: {
            request: async () => {
              var list = await this.$API.system.dic.get.get()
              return list.data.map(item => {
                return {
                  label: item.label,
                  value: item.value
                }
              })
            }
          }
        },
        {
          label: '通知(远程搜索)',
          value: 'noticeType2',
          type: 'select',
          operator: '=',
          placeholder: '请输入关键词后检索',
          extend: {
            remote: true,
            request: async (query) => {
              var data = {
                keyword: query,
              }
              var list = await this.$API.system.dic.get.get(data)
              return list.data.map(item => {
                return {
                  label: item.label,
                  value: item.value
                }
              })
            }
          }
        },
        {
          label: '关键词(标签)',
          value: 'tags',
          type: 'tags',
          operator: 'include',
          operators: [
            {
              label: '包含',
              value: 'include',
            },
            {
              label: '不包含',
              value: 'notinclude',
            }
          ]
        },
        {
          label: '开关(可重复)',
          value: 'switch',
          type: 'switch',
          repeat: true,
          operator: '='
        },
        {
          label: '日期单选',
          value: 'date',
          type: 'date',
          operator: '=',
          operators: [
            {
              label: '等于',
              value: '=',
            },
            {
              label: '不等于',
              value: '!=',
            }
          ]
        },
        {
          label: '日期范围',
          value: 'date2',
          type: 'daterange'
        },
        {
          label: '自定义日期',
          value: 'date3',
          type: 'customDate',
          placeholder: '请选择月份',
          extend: {
            dateType: 'month',
            valueFormat: 'YYYY-MM'
          }
        }
      ]
    }
  },
  methods: {
    change(data){
      this.filterData = data;
    }
  }
}
</script>

<style>
</style>
